<template>
     <div class="content clearfix">
         <div class="content-tu">
            <img src="@/assets/img/qt-p1-3.png" alt="">
        </div>
        <div class="content-tu1">
            <img src="@/assets/img/qt-p1-4.png" alt="">
        </div>
        <div class="content-wz">
            <ul class="content-wz-zuo">
                <li :class="i==n?'con':''" v-for="(val,i) in dataFuwu" :key="i">
                    <!-- <a href="javascript:;">Appearance customization</a> -->
                       <a href="javascript:;" @click="srdz(i)">{{val.name}}</a>
                </li>
                <!-- <li>
                    <a href="javascript:;">Hardware customization</a>
                </li>
                <li>
                    <a href="javascript:;">Software customization</a>
                </li>
                <li>
                    <a href="javascript:;">Professional app customization</a>
                </li> -->
            </ul>
            <div class="content-wz-you">
                 <div class="age" v-html="html">
                </div>
                <!-- <div class="content-wz-you-item block">
                    <h2>Appearance customization</h2>
                    <p>When choosing watch customization manufacturers, they should be clear about their own needs, such as the style, quantity, material and other factors of the product.  Because if you want to customize a mechanical watch, the result went to the production of quartz watch factory that is certainly not appropriate!  And confirm the manufacturer first, you can offer as soon as possible.</p>
                    <p>Secondly, when choosing a watch manufacturer, a field visit should be carried out.  Find out about the size of the factory, the production environment, the manufacturer's credentials, etc.  Relevant licenses, such as business licenses, are used to determine whether a factory is good or not.  And each factory will have customized successful case, case is also a way to witness the strength.  </p>
                </div> -->
                <!-- <div class="content-wz-you-item">
                    <h2>Hardware customization</h2>
                    <p>When choosing watch customization manufacturers, they should be clear about their own needs, such as the style, quantity, material and other factors of the product.  Because if you want to customize a mechanical watch, the result went to the production of quartz watch factory that is certainly not appropriate!  And confirm the manufacturer first, you can offer as soon as possible.</p>
                    <p>Secondly, when choosing a watch manufacturer, a field visit should be carried out.  Find out about the size of the factory, the production environment, the manufacturer's credentials, etc.  Relevant licenses, such as business licenses, are used to determine whether a factory is good or not.  And each factory will have customized successful case, case is also a way to witness the strength.  </p>
                </div>
                <div class="content-wz-you-item">
                    <h2>Software customization</h2>
                    <p>When choosing watch customization manufacturers, they should be clear about their own needs, such as the style, quantity, material and other factors of the product.  Because if you want to customize a mechanical watch, the result went to the production of quartz watch factory that is certainly not appropriate!  And confirm the manufacturer first, you can offer as soon as possible.</p>
                    <p>Secondly, when choosing a watch manufacturer, a field visit should be carried out.  Find out about the size of the factory, the production environment, the manufacturer's credentials, etc.  Relevant licenses, such as business licenses, are used to determine whether a factory is good or not.  And each factory will have customized successful case, case is also a way to witness the strength.  </p>
                </div>
                <div class="content-wz-you-item">
                    <h2>Professional app customization</h2>
                    <p>When choosing watch customization manufacturers, they should be clear about their own needs, such as the style, quantity, material and other factors of the product.  Because if you want to customize a mechanical watch, the result went to the production of quartz watch factory that is certainly not appropriate!  And confirm the manufacturer first, you can offer as soon as possible.</p>
                    <p>Secondly, when choosing a watch manufacturer, a field visit should be carried out.  Find out about the size of the factory, the production environment, the manufacturer's credentials, etc.  Relevant licenses, such as business licenses, are used to determine whether a factory is good or not.  And each factory will have customized successful case, case is also a way to witness the strength.  </p>
                </div> -->
            </div>
        </div>
    </div>
</template>
<style scoped src='@/assets/css/service.css'>
.age{
    background-color: red;
}
</style>
<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import { marked } from 'marked'
const html = ref('')
const { proxy } = getCurrentInstance()
const dataFuwu = ref([])
async function fuWu () {
const { data: res } = await proxy.$http.get('customized?lang=en')
    if (res.code !== 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
  return false
 } else {
  console.log(res.msg)
  dataFuwu.value = res.msg
      // html.value = marked(res.msg.content)
      res.msg.forEach(val => {
        html.value = marked(val.content)
      })
 }
}
const n = ref(0)
function srdz (i) {
  n.value = i
  html.value = dataFuwu.value[i].content
}
// const img = ref('')
// const img2 = ref('')
// const dataFuwu2 = ref([])
// async function fuWu2 () {
// const { data: res } = await proxy.$http.get('about_get')
//     if (res.code !== 1) {
//      proxy.$ElMessage({
//     showClose: true,
//     message: '请求失败',
//     type: 'error'
//   })
//   return false
//  } else {
//        console.log(res, '2222')
//       dataFuwu2.value = res.msg
//       img.value = dataFuwu2.value[1]
//       img2.value =  dataFuwu2.value[2]
//       console.log(dataFuwu2.value)
//  }
// }
onMounted(() => {
    fuWu()
})
</script>
